<script lang="ts">
import navi from "@/components/userNavi.vue";
import {onMounted, ref} from "vue";
import request from "@/utils/request";
import {View} from '@element-plus/icons-vue'
export default{
  components:{
    navi
  },
  setup(){
    const custId=ref()
    const list=ref([])

    onMounted(() => {
      let item = localStorage.getItem("custId");
      try {
        custId.value = item ? JSON.parse(item) : null;
      } catch (error) {
        console.error('Error parsing JSON:', error);
      }
      displayFavourite()
    })

    const displayFavourite=async()=>{
      const res =await request.get(`/displayFav/${custId.value}`)
      console.log(res.data)
      list.value=res.data.data
      console.log(list.value)
    }
    return{
      list,
      View
    }
  }
}
</script>

<template>
  <div class="favourite">
    <navi/>
    <el-table class="table" :data="list" style="width: 100%">
      <el-table-column prop="proName"  width="180" />
      <el-table-column prop="proImg"  width="180">
        <template #default="scope">
          <img class="img" :src="scope.row.proImg" alt="商品图片" />
        </template>
      </el-table-column>
      <el-table-column prop="proPrice">
        <template #default="scope">
          <p style="color: red">{{scope.row.proPrice}}￥</p>
        </template>
      </el-table-column>
      <el-table-column prop="proId" width="180">
        <template #default="scope">
          <router-link :to="{path:`goods/${scope.row.proId}`}" >
            <el-button type="warning">前往商品页面</el-button>
          </router-link>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<style scoped>
.favourite{
  width: 1400px;
  margin: auto;
}
.img{
  height: 180px;
  width: 100%;
}
.table{
  border: none;
}
</style>